<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: zhanglh
  Date: 2019/9/10/010
  Time: 19:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理员管理</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css" rel="stylesheet">
    <style>
        /*复选框位置居中*/
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
    <script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <script type="application/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<%--数据表--%>
<table id="all"></table>

<%--工具栏--%>
<div class="layui-btn-group" id="myToolbar" style="display: none">
    <button type="button" class="layui-btn layui-btn-sm" onclick="toAdd()">
        <i class="layui-icon">&#xe61f; 添加</i>
    </button>
    <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" onclick="batchDeletion()">
        <i class="layui-icon">&#xe640; 批量删除</i>
    </button>
</div>

<%--表单--%>
<form class="layui-form" id="toForm" style="display: none" lay-filter="form">
    <br/>
    <div class="layui-form-item" hidden>
        <label class="layui-form-label">编号</label>
        <div class="layui-input-inline">
            <input type="text" id="id" name="id" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline">
            <input type="text" lay-verify="required" name="username" placeholder="请输入用户名"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-inline">
            <input type="text" lay-verify="required" name="password" placeholder="请输入密码"
                   autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="doAdd" id="doAdd">提交</button>
            <button class="layui-btn" lay-submit lay-filter="doUpdate" id="doUpdate">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script type="text/javascript">
    //初始化表格数据
    layui.use(["table", "form"], function () {
        var table = layui.table;
        var form = layui.form;
        table.render({
            elem: "#all",
            url: "${pageContext.request.contextPath}/admin/all",
            page: true,
            toolbar: "#myToolbar",
            cols: [[
                {type: "checkbox"},
                // 序号，当前页数据按顺序从1计数，不是编号
                {title: '序号', templet: '#indexTpl', width: 60},
                // {title: "编号", field: "id", width: 60},
                {title: "用户名", field: "username"},
                {title: "密码", field: "password"},
                {title: "操作", templet: "#operating"}
            ]]
        });

        // 执行添加操作
        form.on('submit(doAdd)', function (data) {
            $.ajax({
                url: "${pageContext.request.contextPath}/admin/add",
                data: data.field,
                type: "post",
                success: function (da) {
                    if (da) {
                        // 关闭弹出层
                        layer.closeAll();
                        // 添加成功,弹出成功提示
                        layer.msg("添加成功");
                        //刷新表格
                        table.reload("all");
                    } else {
                        // 添加失败,弹出失败提示
                        layer.msg("添加失败，请重试");
                    }
                }
            });
            return false;
        })

        // 执行修改操作
        form.on('submit(doUpdate)', function (data) {
            $.ajax({
                url: "${pageContext.request.contextPath}/admin/update",
                data: data.field,
                type: "post",
                success: function (da) {
                    if (da) {
                        // 关闭弹出层
                        layer.closeAll();
                        // 修改成功,弹出成功提示
                        layer.msg("修改成功");
                        //刷新表格
                        table.reload("all");
                    } else {
                        // 修改失败,弹出失败提示
                        layer.msg("修改失败，请重试");
                    }
                }
            });
            return false;
        })
    });

    // 添加弹出框
    function toAdd() {
        //清空表单数据
        document.getElementById("toForm").reset();
        //更换按钮
        $("#doAdd").show();
        $("#doUpdate").hide();
        // 弹出输入框
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.open({
                //弹出框类型
                type: 1,
                //弹出框标题
                title: "添加轮播图",
                //弹出框内容
                content: $("#toForm"),
                //弹出框尺寸[宽,高]
                area: "530px",
                //弹出动画
                anim: 1,
                //最大最小化
                maxmin: true,
                //取消弹出框回调函数
                cancel: function (index, layero) {
                    layer.msg("添加操作已取消");
                }
            })
        });
    }

    //修改弹出框
    function toUpdate(id) {
        layui.use(['layer', 'table', 'form'], function () {
            var layer = layui.layer;
            var table = layui.table;
            var form = layui.form;
            //发送请求查询改条数据详细信息
            $.ajax({
                url: "${pageContext.request.contextPath}/admin/selectOne",
                data: {"id": id},
                type: "post",
                success: function (data) {
                    //初始化表单数据
                    form.val("form", {
                        "id": data.id,
                        "username": data.username,
                        "password": data.password
                    });
                }
            });
            //更换按钮
            $("#doAdd").hide();
            $("#doUpdate").show();
            //弹出弹出层
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    type: 1,
                    title: "修改管理员信息",
                    content: $("#toForm"),
                    // area: "530px",
                    anim: 1,
                    maxmin: true,
                    cancel: function (index, layero) {
                        layer.msg("修改操作已取消");
                    }
                })
            });
        })
    }

    // 删除
    function toDelete(id) {
        layui.use(["layer", "table"], function () {
            var layer = layui.layer;
            var table = layui.table;
            layer.confirm('是否删除？，删除后不可恢复！', {icon: 3, title: '警告'}, function (index) {
                $.ajax({
                    url: "${pageContext.request.contextPath}/admian/remove",
                    data: "ids=" + id,
                    type: "post",
                    success: function (data) {
                        if (data) {
                            // 关闭弹出框
                            layer.closeAll();
                            // 成功提示
                            layer.msg("删除成功");
                            // 刷新表格
                            table.reload("all");
                        } else {
                            layer.msg("删除失败，请重试");
                            layer.close(index);
                        }
                    }
                });
            }, function () {
                layer.msg("删除操作已取消");
            });
        })
    }

    //批量删除
    function batchDeletion() {
        layui.use(["layer", "table"], function () {
            var layer = layui.layer;
            var table = layui.table;
            // 获取到选择的数据
            var checkStatus = table.checkStatus("all");
            var length = checkStatus.data.length;
            //判断是否有数据
            if (length) {
                layer.confirm('是否删除管理员?', {icon: 3, title: '警告'}, function (index) {
                        // 将id封装为新的数组
                        var ids = new Array(length);
                        for (var i = 0; i < length; i++) {
                            ids[i] = checkStatus.data[i].id;
                        }
                        // 发送删除请求
                        $.ajax({
                            url: "${pageContext.request.contextPath}/admin/remove",
                            data: "ids=" + ids,
                            type: "post",
                            success: function (data) {
                                if (data) {
                                    // 成功提示
                                    layer.msg("删除成功");
                                    // 关闭弹出框
                                    layer.close(index);
                                    // 刷新表格
                                    table.reload("all");
                                } else {
                                    layer.msg("删除失败，请重试");
                                    layer.close(index);
                                }
                            }
                        });
                    },
                    function () {
                        layer.msg("删除操作已取消");
                    })
            } else {
                layer.msg("请先选择要删除的管理员");
            }
        })
    }
</script>
<script type="text/html" id="operating">
    <button type="button" class="layui-btn layui-btn-xs" onclick="toUpdate('{{ d.id }}')">
        <i class="layui-icon">&#xe642; 修改</i>
    </button>
    <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" onclick="toDelete('{{ d.id }}')">
        <i class="layui-icon">&#xe640; 删除</i>
    </button>
</script>
<script type="text/html" id="indexTpl">
    {{d.LAY_TABLE_INDEX+1}}
</script>
</body>
</html>
